<template>
  <div class="entity-org">
    <div class="entity-main">
      <el-row :gutter="20" type="flex">
        <el-col :span="10">
          <NewCard title="热词列表" :isright="true" :border="false">
            <template #right>
              <ComForm title="搜索" @EventOnsubmit="searchRefFn" :list="comForm"></ComForm>
            </template>
            <!-- 表格 :summary-method="getSummaries"-->
            <el-table
              ref="monthlyPlanTable"
              :data="hotwordlist"
              style="width: 100%"
              highlight-current-row
              @row-click="RowClickFn"
              :row-class-name="tableRowClassName"
              v-hasPermi="['base:hotLabel:edit']"
            >
              <el-table-column label="热词">
                <template slot-scope="scope">
                  <el-input
                    v-if="scope.row.isedithotward"
                    v-model="scope.row.label"
                    :placeholder="scope.row.label?scope.row.label:'--'"
                    @change="(item) => {
                      edithotword(item, scope.row);
                    }"
                  ></el-input>
                  <!-- <el-popover
                    v-else
                    width="150"
                    popper-class="officeweb-popover"
                    placement="top-start"
                    trigger="hover"
                    :content="scope.row.label"
                  >-->
                  <!-- <p
                     v-else
                      slot="reference"
                      @click="
              drawer = true;
              showedithotward(scope.row);"
                  >{{ scope.row.label?scope.row.label:"--" }}</p>-->
                  <!-- </el-popover> -->
                  <p
                    v-else
                    @click="
              drawer = true;
              showedithotward(scope.row);"
                  >{{ scope.row.label?scope.row.label:"--" }}</p>
                </template>
              </el-table-column>
              <el-table-column width="80" prop="phone" label="应用点击量">
                <template slot-scope="scope">
                  <!-- <el-popover
                        placement="top-start"
                        trigger="hover"
                        :content="scope.row.userCount ? scope.row.userCount : '0'"
                  >-->
                  <p slot="reference">{{ scope.row.goodsClick ? scope.row.goodsClick : "0" }}</p>
                  <!-- </el-popover> -->
                </template>
              </el-table-column>
              <!-- 官网点击量 -->
              <el-table-column prop="higherLevel" label="官网点击量" width="80">
                <template slot-scope="scope">
                  <p>{{ scope.row.click ? scope.row.click : "0" }}</p>
                </template>
              </el-table-column>
              <!-- 关联文案 -->
              <el-table-column prop="supervisorId" label="关联文案" width="70">
                <template slot-scope="scope">
                  <p>{{ scope.row.exampleNum }}</p>
                </template>
              </el-table-column>
              <!-- 图片数 -->
              <el-table-column prop="userCount" width="60" label="图片数">
                <template slot-scope="scope">
                  <p>{{ scope.row.imageNum }}</p>
                </template>
              </el-table-column>
              <el-table-column width="50" label="操作">
                <template slot-scope="scope">
                  <!-- @change="changeSwitch(scope.row)" -->
                  <el-switch
                    v-model="scope.row.status"
                    active-color="#f87a23"
                    active-value="0"
                    inactive-value="1"
                  ></el-switch>
                </template>
              </el-table-column>
            </el-table>
            <div class="pagination">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :page-sizes="[10, 20, 30, 40]"
                :pager-count="5"
                layout="total, sizes, prev, pager, next, jumper"
                :total="pageing.total"
              ></el-pagination>
            </div>

            <div class="bottomBtn">
              <el-button
                v-if="buttonVissible"
                class="button-new-tag"
                size="medium"
                @click="showButton"
              >+ 添加热词</el-button>
              <div v-else class="inputBox">
                <el-input v-model="hotwordaddObj.label" placeholder="请输入热词"></el-input>
              </div>
              <div class="buttonBox">
                <el-button
                  round
                  type="primary"
                  @click="addHotword"
                  v-hasPermi="['base:hotLabel:add']"
                >确认</el-button>
                <el-button round @click="addReset">取消</el-button>
              </div>
            </div>
          </NewCard>
        </el-col>
        <el-col :span="14">
          <!--:isright="true" :title="`${title}`" -->
          <NewCard :isright="true" :title="`${title}`">
            <template slot="right">
              <!-- v-if="isRolesShow()" slot="right"-->
              <el-select
                v-show="groupState == 3"
                class="copywrite"
                v-model="writetype"
                placeholder="请选择关联文案状态"
                @change="
                      selectwritetype
                    "
              >
                <el-option
                  v-for="(item,index) in writetypelist"
                  :key="index"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
              <!-- 按钮组 -->
              <el-button-group>
                <el-button
                  type="primary"
                  :class="groupState == 1 ? 'isActive' : ''"
                  @click="
                    groupState = 1;
                    handleClick(groupState);
                  "
                >关联图片</el-button>
                <el-button
                  type="primary"
                  :class="groupState == 2 ? 'isActive' : ''"
                  @click="
                    groupState = 2;
                    handleClick(groupState);
                  "
                >关联服务</el-button>
                <el-button
                  type="primary"
                  :class="groupState == 3 ? 'isActive' : ''"
                  @click="
                    groupState = 3;
                    handleClick(groupState);
                  "
                >关联文案</el-button>
              </el-button-group>
            </template>
            <!-- 按钮组  end-->
            <!-- 关联图片 -->
            <div class="consumption" v-if="groupState == 1" style="height: 100%;">
              <AssociatedImages
                @gethotindex="gethotindex"
                :selectItem.sync="selectItem"
                ref="AssociatedImages"
              ></AssociatedImages>
            </div>
            <!-- 关联服务 -->
            <div class="consumption" v-if="groupState == 2">
              <HotwordServer ref="HotwordServer"></HotwordServer>
            </div>
            <!-- 关联文案 -->
            <div class="consumption" v-if="groupState == 3">
              <AssociatedWriter ref="AssociatedWriter"></AssociatedWriter>
            </div>
          </NewCard>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import {
  gethotLabelGetInfoApi,
  gethotLabelListApi,
  gethotLabeladdApi,
  gethotLabelEditApi
} from "@/wss/newApi_3-24/officewebsite/hotLabel.js";
import NewCard from "@/wss/components/newCard.vue";
import ComForm from "@/wss/components/comForm.vue";
import ComTable from "@/wss/components/comTable.vue";
import AssociatedWriter from "./components/associatedwriter.vue";
import AssociatedImages from "./components/associatedimages.vue";
import HotwordServer from "./components/hotwordserver.vue";
// import { log } from "console";
// import BusinessList from "../../../business/businessList/index.vue";
const arr = [null, "", undefined];

export default {
  name: "hotwordset",
  components: {
    NewCard,
    ComForm,
    ComTable,
    AssociatedWriter,
    AssociatedImages,
    HotwordServer
  },
  data() {
    return {
      // 是否显示添加热词按钮
      buttonVissible: true,
      // 添加热词
      hotwordaddObj: {
        //热词关键字
        label: ""
      },
      // 表单配置
      comForm: {
        modes: [
          {
            formType: "input",
            placeholder: "搜索热词",
            mode: "label"
          }
        ]
      },
      // 分页参数
      pageing: { pageNum: 1, pageSize: 10, total: 0 },
      bottomBtnShow: true, //底部按钮
      bottomBtnValue: "", //底部输入值
      //热词
      // 热词数组
      hotwordlist: [],
      hotwordid: "",
      // 右边栏
      title: "一带一路", //右边栏名称
      groupState: 1, //1关联图片 2关联服务 3关联文案
      selectItem: 0, //选择某一行，选择某一个热词的用户
      fromchange: false,
      writetype: "", //关联文案上下架状态
      writetypelist: [
        {
          id: "",
          name: "全部"
        },
        {
          id: "0",
          name: "上架"
        },
        {
          id: "1",
          name: "下架"
        }
      ]
    };
  },
  watch: {
    hotwordlist: function() {
      this.$nextTick(function() {
        this.$refs.monthlyPlanTable.setCurrentRow(
          this.hotwordlist[this.selectItem]
        );
      });
    }
  },
  async mounted() {
    // this.$nextTick(function() {
    //   this.$refs.monthlyPlanTable.setCurrentRow(
    //     this.hotwordlist[this.selectItem]
    //   );
    // });
    Promise.all([this.gethotwordlist()]).then(res => {
      this.$refs.AssociatedImages.goHotwordimagelist(this.hotwordid);
      // this.$refs.HotwordServer.getHotwordServer(this.hotwordid);
    });
  },
  methods: {
    showButton() {
      this.buttonVissible = false;
    },
    // 子组件调用的函数
    gethotindex() {
      this.fromchange = true;
      this.gethotwordlist();
    },
    // 获取热词列表
    async gethotwordlist() {
      const { pageNum, pageSize } = this.pageing;
      let { code, rows, total } = await gethotLabelListApi({
        pageNum,
        pageSize,
        label: this.hotwordaddObj.label,
        status: ""
      });
      this.pageing.total = total;

      rows.forEach(item => {
        Object.assign(item, { isedithotward: false });
        //console.log(item);
      });
      const List = JSON.parse(JSON.stringify(rows));
      // console.log("热词列表");
      // console.log(List);
      this.hotwordlist = List;
      if (!this.fromchange) {
        this.title = this.hotwordlist[0].label;
        this.hotwordid = List[0].id;
      } else {
        this.title = this.title;
        this.hotwordid = this.hotwordid;
        this.hotwordlist.forEach((item, index) => {
          if (item.id == this.hotwordid) {
            this.selectItem = index;
          }
        });
      }
      this.hotwordlist = this.hotwordlist.filter(item => Boolean(item));
      console.log(this.hotwordlist);
      if (code != 200) return;
    },
    //添加热词
    async addHotword() {
      const hotwordaddObj = this.hotwordaddObj;
      if (
        hotwordaddObj.label == "" ||
        hotwordaddObj.label.replace(/(^\s*)|(\s*$)/g, "") == ""
      ) {
        this.$message({
          message: "热词不可为空",
          type: "warning"
        });
        return;
      }
      let { code, msg } = await gethotLabeladdApi(hotwordaddObj);
      this.buttonVissible = true;
      if (code != 200) return;
      // 清空
      this.addReset();
      this.gethotwordlist();

      this.$message({
        message: msg,
        type: "success"
      });
    },
    // 编辑热词
    async edithotword(item, rows) {
      // console.log("修改修改");
      // console.log(item, rows);
      if (item == "" || item.replace(/(^\s*)|(\s*$)/g, "") == "") {
        this.$message({
          message: "热词不可为空",
          type: "warning"
        });
        return;
      }
      let { code, msg } = await gethotLabelEditApi({
        id: rows.id,
        label: item
      });
      if (code != 200) return;
      this.gethotwordlist();
      this.$message({
        message: msg,
        type: "success"
      });
    },
    // 查询函数
    searchRefFn([{ label = "" }]) {
      this.hotwordaddObj.label = label;
      this.gethotwordlist();
    },

    // 关闭热词input按钮
    addReset() {
      this.hotwordaddObj = {
        label: ""
      };
      this.buttonVissible = true;
    },
    handleCurrentChange(pageNum) {
      this.pageing.pageNum = pageNum;
      this.gethotwordlist();
    },
    // 页容量发生改变
    handleSizeChange(pageSize) {
      this.pageing.pageSize = pageSize;
      this.gethotwordlist();
    },
    // 表格行点击了
    RowClickFn(row, column, event) {
      //切换展示tab，
      // console.log("表格行点击了");
      // console.log(row);
      this.hotwordid = row.id;
      this.title = row.label;
      this.writetype = "";
      //this.hotwordlist.forEach((item, i) => {
      //this.$set(item, "status", true);
      //});

      //this.$set(row, "status", false);

      //默认选择第一列
      this.groupState = 1;
      //默认查询对应ID的图片
      this.$nextTick(() => {
        this.$refs.AssociatedImages.goHotwordimagelist(this.hotwordid);
      });
    },
    // tab判断处理
    selecttab(value) {
      switch (value) {
        case 1:
          this.$nextTick(() => {
            this.$refs.AssociatedImages.goHotwordimagelist(this.hotwordid);
          });
          break;
        case 2:
          this.$nextTick(() => {
            this.$refs.HotwordServer.getHotwordServer(this.hotwordid);
          });
          break;
        case 3:
          this.$nextTick(() => {
            this.$refs.AssociatedWriter.getAssociatedWriter(this.hotwordid);
          });
          break;
      }
    },
    // 选择关联文案上下架状态
    selectwritetype(item) {
      // console.log("选择上下架状态");
      // console.log(item);
      this.$refs.AssociatedWriter.changewritetype(item);
    },
    //显示热词修改输入框
    showedithotward(row) {
      // console.log("改变热词");
      // console.log(row);
      this.$set(row, "isedithotward", true);
    },
    //tab切换事件
    handleClick(activeName) {
      if (!this.hotwordid == "") {
        this.selecttab(activeName);
      } else {
        this.$message({
          message: "请选择某一条热词信息",
          type: "warning"
        });
      }
    },
    tableRowClassName({ row, rowIndex }) {
      //console.log(row, rowIndex);
      row.index = rowIndex;
    }
    // 点击状态关闭或者开启
    // async changeSwitch(row) {
    // if (row.userCount && Number(row.userCount) > 0) {
    //   row.status = "0";
    //   this.$message({
    //     type: "warning",
    //     message: "该商务下有捆绑用户，请把用户重新分配后再操作"
    //   });
    //   return;
    // }

    // let { code, msg } = await getCommercialManagerEditApi(row);
    // if (code != 200) return;
    // this.$message({
    //   type: "success",
    //   message: msg
    // });
    //}
    // 表格总计行的规则 ****************
    // getSummaries(param) {
    //   const { columns, data } = param;
    //   const sums = [];
    //   columns.forEach((column, index) => {
    //     if (index === 0) {
    //       sums[index] = "合计";
    //       return;
    //     }
    //     if (["higherLevel", "supervisorId"].includes(column.property)) {
    //       sums[index] = "--";

    //       return;
    //     }

    //     const values = data.map(item => {
    //       // console.log(column.property);
    //       // console.log(item[column.property]);
    //       return Number(item[column.property]);
    //     });
    //     if (!values.every(value => isNaN(value))) {
    //       sums[index] = values.reduce((prev, curr) => {
    //         const value = Number(curr);
    //         if (!isNaN(value)) {
    //           return prev + curr;
    //         } else {
    //           return prev;
    //         }
    //       }, 0);
    //       sums[index];
    //     } else {
    //       sums[index] = "--";
    //     }
    //     if (index === 3) {
    //       sums[index] = this.$options.filters["sumFilters"](sums[index]);
    //       return;
    //     }
    //   });

    //   return sums;
    // },
    // 表格总计行的规则 **************** end

    //右边栏
    // 判断当前项目列表是否展示 根据角色
    // isRolesShow() {
    //   let roles = this.$store.state.user.roles;
    //   if (roles.includes("admin") || roles.includes("swzy")) {
    //     return true;
    //   } else {
    //     return false;
    //   }
    // },
  }
};
</script>

<style scoped lang="scss">
// ::v-deep .main-div{
//   height: calc(100% - 54px);
// }
.entity-org {
  height: 100%;
}
::v-deep .entity-main .el-card {
  position: relative;
}
::v-deep .entity-main .el-card__body {
  height: 100%;
}
::v-deep .entity-main .el-card__body > div {
  height: 92%;
  overflow-y: auto;
}
::v-deep .entity-main .el-card__body > div::-webkit-scrollbar {
  width: 0;
}
::v-deep .top {
  border-bottom: none !important;
}

/* 选择器 */
.mateCascader {
  /* height: 6%; */
  margin-bottom: 20px;
}
::v-deep .mateCascader .el-select {
  padding: 0 10px;
  border-radius: 8px;
  width: 320px;
  background-color: #f5f6f8;
}
::v-deep .mateCascader .el-select .el-input__inner {
  border: 0;
  background-color: transparent;
  padding-left: 0;
  font-size: 20px;
  font-weight: 600;
  color: #2e3f5e;
}
::v-deep .mateCascader .el-select .el-select__caret {
  color: #2e3f5e;
}
::v-deep .mateCascader .el-select .el-select__caret:before {
  content: "\E78F";
}
.el-select-dropdown .el-select-dropdown__item.selected {
  color: #f87a23;
}
//分页
.pagination {
  text-align: center;
  margin-bottom: 70px;
}
/* 内容区 */
.entity-main {
  height: 100%;
}
.entity-main .el-row {
  height: 100%;
}
::v-deep .entity-main .el-form .el-input--medium {
  width: 100px !important;
}
::v-deep .entity-main .el-form .el-button--default {
  display: none;
}
/* 表格样式 */
.el-table {
  margin-bottom: 10px;
}
::v-deep .el-table .el-table__header-wrapper th {
  background-color: #fff;
}
::v-deep .el-table th.is-leaf {
  border-top: 1px solid #efefef;
  border-bottom: 1px solid #efefef;
}
::v-deep .el-table th > .cell {
  font-size: 12px;
  color: #909aaa;
}
::v-deep .el-table .cell,
::v-deep .el-table .cell p {
  margin: 0;
  font-size: 14px;
  color: #2e3f5e;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
}
::v-deep .el-table .cell .el-button {
  color: #f87a23;
}
::v-deep .el-table .cell .el-table__expand-icon i::before {
  content: "\E791";
}
::v-deep .el-table td {
  /* border-bottom: 0; */
}
::v-deep .el-table td .islight {
  color: #f87a23;
}
::v-deep .el-table .el-table__expanded-cell[class*="cell"] {
  padding: 0;
}
::v-deep .el-table__expanded-cell .el-table::before {
  height: 0;
}
::v-deep .el-table__expanded-cell .el-table th.is-leaf {
  border-top: 0;
}
::v-deep .el-table__expanded-cell .el-table td {
  border-bottom: 0;
}

::v-deep .el-table__footer-wrapper tbody td {
  background-color: #fff;
  font-weight: bold;
  color: #2e3f5e;
}

.selsect-box {
  position: relative;
}
.selsect-box > p {
  position: relative;
}
.selsect-box .el-select {
  position: absolute;
  top: 0;
  z-index: 9;
  opacity: 0;
}

/* 添加材料 */
.bottomBtn {
  background-color: #f6f9f8;
  display: flex;
  justify-content: center;
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 9px 10px;
  width: 100%;
  border-top: 1px solid #ecedf0;
  z-index: 9;
  .inputBox {
    // flex: 1;
    display: flex;
  }
  .buttonBox {
    ::v-deep .el-button--primary {
      background-color: #f87a23;
      border-color: #f87a23;
      color: #ffffff;
      width: 90px;
      // height: 40px;
      line-height: 34px;
      padding: 0;
      text-align: center;
      font-size: 14px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #ffffff;
    }
    ::v-deep .el-button--default {
      background-color: #ffffff;
      width: 90px;
      // height: 40px;
      line-height: 34px;
      padding: 0;
      text-align: center;
      font-size: 14px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #606e84;
    }

    /* // ::v-deep .el-button + .el-button {
    //   margin-left: 0px;
    // } */
  }
}

::v-deep .el-table .el-dropdown-link {
  color: unset;
}
.bottomBtn .el-button {
  width: 100%;
  border: 0;
  border-top: 1px solid #ecedf0;
  background-color: #f8f8f8;
  line-height: 25px;
  color: #606e84;
}
.bottomBtn .el-input {
  width: 100%;
  margin-right: 10px;
}
::v-deep .bottomBtn .el-input .el-input__inner {
  height: 36px;
  line-height: 36px;
  /* // border-top: 1px solid #ecedf0;
  // background-color: #f8f8f8; */
  // text-align: center;
}

.button-new-tag {
  position: absolute;
  bottom: 0;
  left: 0;
  border: 0;
  z-index: 2;
  display: block;
  width: 100%;
  font-size: 16px;
  padding: 15px 20px;
  background-color: #f8f8f8;
  border-top: 1px solid #e6ebf5;
}
/* 按钮组 */
::v-deep .top .right {
  flex: none;
}
.el-button-group {
  display: flex;
}
.el-button-group .el-button {
  background-color: #f0f2f5;
  color: #2e3f5e;
  border: 1px solid #f0f2f5;
  padding: 10px 10px;
}
.el-button-group .el-button.isActive {
  background-color: #fff;
  color: #f87a23;
  font-weight: bold;
}
.el-button-group i {
  display: inline-block;
  font-size: 14px;
  background-color: #f0f2f5;
  padding: 10px 10px;
  cursor: pointer;
}
/* 按钮组 end*/
::v-deep .el-input__inner {
  caret-color: #f97f2a;
}
::v-deep .el-select.copywrite {
  width: 170px;
  margin-right: 10px;
}
::v-deep .el-input.is-focus .el-input__inner,
::v-deep .el-select .el-input__inner:focus {
  border-color: #f97f2a;
}
</style>
<style>
.el-popover.officeweb-popover {
  background: #090d29;
  border-color: #090d29;
  color: #ffffff;
  font-size: 12px;
  margin: 0;
  padding: 8px;
  /* text-align: center; */
  max-width: 280px;
}

/* //修改title颜色 */
.el-popover.officeweb-popover .el-popover__title {
  color: white;
}
/* //修改下面的小三角，属性名根据组件的placement位置做相应修改 */
.el-popover.officeweb-popover .popper__arrow::after {
  border-top-color: #090d29 !important;
}
</style>